<template>
    <div class="content">
        <!-- <div class="content-top">

        </div>
        <div class="content-bottom">

        </div> -->
        <div id="countState" :style="{ height: '600px'}"></div>
<!--        <div id="departmentCase" :style="{ height: '300px'}"></div>-->
<!--        <div id="departmentDoctor" :style="{ height: '300px'}"></div>-->
        <!--        <div id="depart" :style="{width: '300px', height: '300px'}"></div>-->
    </div>
</template>

<script>
    import {countState, countDocPatient} from "../../api/count";

    export default {
        name: 'hello',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                countState: {},
                docPatient:{},
                dataList: [],
            }
        },
        created() {
            this.init();
        },
        mounted() {
            // this.drawLine();
        },
        computed: {},
        watch: {
            countState() {
                // 科室病例实例
                let countState = this.$echarts.init(document.getElementById('countState'))
                // 绘制图表
                countState.setOption({
                    title: {text: `近七天各挂号人次,总人次为${this.countState.count}`},
                    tooltip: {},
                    xAxis: {
                        data: this.countState.key
                    },
                    yAxis: {},
                    series: [{
                        name: '人次',
                        type: 'line',
                        data: this.countState.value
                    }]
                });
            },
            // docPatient(){
            //     // 医生患者实例
            //     let departmentCase = this.$echarts.init(document.getElementById('departmentCase'))
            //     // 绘制图表
            //     departmentCase.setOption({
            //         title: {text: `近七天各科室的挂号人次,总人次为${this.docPatient.count}`},
            //         tooltip: {},
            //         xAxis: {
            //             data: this.docPatient.key
            //         },
            //         yAxis: {},
            //         series: [{
            //             name: '销量',
            //             type: 'line',
            //             data: this.docPatient.value
            //         }]
            //     });
            // }
        },
        methods: {
            async init() {
                let countState1 = await countState({
                    hospital:sessionStorage.getItem('hospitalId')
                });
                // let docPatient = await countDocPatient();
                // console.log(docPatient);
                // this.docPatient = docPatient;
                this.countState = countState1;
            },
            // drawLine() {
            //     // 科室医生实例
            //     let departmentDoctor = this.$echarts.init(document.getElementById('departmentDoctor'))
            //     // 绘制图表
            //     departmentDoctor.setOption({
            //         title: {text: '科室医生统计'},
            //         tooltip: {},
            //         xAxis: {
            //             data: ["chi", "羊毛", "雪纺", "裤子", "高跟", "袜子", , "袜子", "袜子", "袜子"]
            //         },
            //         yAxis: {},
            //         series: [{
            //             name: '销量',
            //             type: 'bar',
            //             data: [5, 20, 36, 10, 10, 100, 10, 10, 100, 48]
            //         }]
            //     });
            // }
        }
    }
</script>

<style scoped lang='scss'>
    .content {
        padding-left: 20px;
        height: 614px;
        overflow-y: scroll;
    }
</style>